<template>
	<view class="bigbox">
		<view class="box">
			<qiun-title-bar class="title" title=" 2023 年上半年使用充电桩" />
			<view class="charts-box">
				<qiun-data-charts type="column" :chartData="Column" />
			</view>
		</view>
		<view class="box">
			<qiun-title-bar class="title" title=" 2023 年 3 月、 5 月每百公里耗电量" />
			<view class="charts-box">
				<qiun-data-charts type="line" :chartData="Line" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Column: {
					"categories": ["1月", "2月", "3月", "4月", "5月", "6月"],
					"series": [{
							"name": "充电次数",
							"data": [3, 5, 2, 7, 5, 6]
						}, {
							"name": "充电量",
							"data": [24, 40, 16, 56, 40, 48]
						},
						{
							"name": "花费",
							"data": [12, 20, 8, 28, 20, 24]
						},
					]
				},
				// 耗电量、行驶里程和平均百公里耗电量。
				Line: {
					"categories": ["3月", "5月"],
					"series": [{
						"name": "耗电量",
						"data": [35, 8]
					}, {
						"name": "行驶里程",
						"data": [70, 40]
					}, {
						"name": "平均百公里耗电量",
						"data": [100, 80]
					}]
				}
			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background: linear-gradient(#e4f2fc 40%, white 60%);
	}

	.bigbox {
		padding: 20rpx;
	}

	.box {
		height: 600rpx;

		margin-bottom: 90rpx;
	}

	.title {
		margin-top: 30rpx;
	}

	.charts-box {
		background-color: #fff;
		border-radius: 25rpx;
		box-shadow: 0 1rpx 12rpx rgba(0, 0, 0, 0.1);
	}
</style>
